<template>
  <div style="padding-left: 20px;">
    <el-row>
      <el-col :span="5">出发城市：</el-col>
      <el-col :span="5">出发线路：</el-col>
      <el-col :span="5">行程状态：</el-col>
      <el-col :span="5">时间安排：</el-col>
    </el-row>
    <el-row>
      <el-col :span="5">
        <el-select v-model="startCity" placeholder="请选择" @change="startCityChange()">
          <el-option
            v-for="item in cityList"
            :key="item.id"
            :label="item.cityName"
            :value="item.cityName"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-select v-model="allOrder" placeholder="请选择">
          <el-option
            v-for="item in allOrderList"
            :key="item.id"
            :label="item.startCity + '-' + item.endCity"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-select v-model="routeState" placeholder="请选择">
          <el-option
            v-for="item in routeStateList"
            :key="item.id"
            :label="item.state"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-date-picker v-model="orderTime" type="date" value-format="timestamp" placeholder="选择日期"></el-date-picker>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="search">搜索</el-button>
      </el-col>
    </el-row>
    <el-row style="margin: 20px 0" v-if="arrFlag">
      <el-button @click="anpaiCar" type="primary">批量安排车辆</el-button>
    </el-row>
    <el-table
      :row-style="rowStyle"
      :data="tableData"
      border
      style="margin-top: 20px"
      ref="multipleTable"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column label="订单时间" width="180">
        <template slot-scope="scope">{{scope.row.createTime | formatDate}}</template>
      </el-table-column>
      <el-table-column prop="userNickName" label="昵称" ></el-table-column>
      <el-table-column prop="userPhone" label="电话" ></el-table-column>
      <el-table-column prop="remarks" label="备注" ></el-table-column>
      <el-table-column prop="startAddress" label="接车地点"></el-table-column>
      <el-table-column prop="endAddress" label="送车地点"></el-table-column>
      <el-table-column label="出发时间" width="180">
        <template slot-scope="scope">{{scope.row.startTime | formatDate}}</template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="success"
            icon="el-icon-position"
            @click="anpaiCar(scope.row)"
          >安排车辆</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      style="float: right;margin: 20px 50px;"
      :total="page.tatol"
    ></el-pagination>
    <el-dialog title="车辆安排" :visible.sync="anpaiCarFlag" width="70%">
      <el-table :row-style="rowStyle" :data="anpaiData" border>
        <el-table-column prop="carNo" label="车牌号码"></el-table-column>
        <el-table-column prop="realName" label="司机姓名"></el-table-column>
        <el-table-column prop="phone" label="联系电话"></el-table-column>
        <el-table-column prop="freeNumber" label="空座"></el-table-column>
        <el-table-column label="车辆状态">
          <template
            slot-scope="scope"
          >{{scope.row.state === 1 ? '暂停接单' : scope.row.state === 2 ? '未接单' : '工作中'}}</template>
        </el-table-column>
        <el-table-column label="安排车辆" width="100">
          <template slot-scope="scope">
            <el-popconfirm title="确定安排这趟车辆吗？">
              <el-button type="text" size="small" @click="queren(scope.row)">确认车辆</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import { Message } from 'element-ui'
export default {
  created () {
    request({
      url: '/city/findPage',
      method: 'get',
      params: {
        pageNo: 1,
        pageSize: 200
      }
    }).then(res => {
      if (res.code === '00000000') {
        this.cityList = res.data.data
      }
    })
  },
  data () {
    return {
      cityList: [],
      startCity: '',
      allOrderList: [],
      allOrder: '',
      orderTime: '',
      routeStateList: [
        {
          id: 0,
          state: '等待派单'
        },
        {
          id: 1,
          state: '等待上车'
        },
        {
          id: 2,
          state: '行程进行中'
        },
        {
          id: 3,
          state: '行程已结束'
        }
      ],
      routeState: '',
      tableData: [],
      anpaiCarFlag: false,
      anpaiData: [],
      orderNo: '',
      page: {
        pageSize: 10,
        pageNo: 1,
        tatol: 0
      },
      multipleSelection: [],
      arrFlag: false
    }
  },
  methods: {
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row.orderNo)
          this.arrFlag = true
        })
      } else {
        this.$refs.multipleTable.clearSelection()
        this.arrFlag = false
      }
    },
    handleSelectionChange (val) {
      if (val.length >= 1) {
        this.arrFlag = true
      } else {
        this.arrFlag = false
      }
      // this.multipleSelection = val
      for (let i = 0; i < val.length; i++) {
        // const element = array[i];
        if (val[i].id) {
          this.multipleSelection.push(val[i].orderNo)
        }
      }
      // console.log(val)
      // console.log(this.multipleSelection)
    },
    startCityChange () {
      request({
        url: '/route/findPage',
        method: 'get',
        params: {
          cityName: this.startCity,
          pageNo: 1,
          pageSize: 200
        }
      }).then(res => {
        if (res.code === '00000000') {
          this.allOrderList = res.data.data
          for (let i = 0; i < this.cityList.length; i++) {
            for (let j = 0; j < this.allOrderList.length; j++) {
              if (this.allOrderList[j].startCity === this.cityList[i].id) {
                this.allOrderList[j].startCity = this.cityList[i].cityName
              }
              if (this.allOrderList[j].endCity === this.cityList[i].id) {
                this.allOrderList[j].endCity = this.cityList[i].cityName
              }
            }
          }
          this.allOrder = ''
        }
      })
    },
    search () {
      this.tableData = []
      this.page = {
        pageSize: 10,
        pageNo: 1,
        tatol: 0
      }
      if (!this.orderTime || this.allOrder === '' || this.routeState === '') {
        Message({
          message: '请选择查询条件！',
          type: 'error',
          duration: 5 * 1000
        })
        return
      }
      this.getTableData()
    },
    anpaiCar (row) {
      this.anpaiCarFlag = true
      // this.orderNo = row.orderNo
      if (this.multipleSelection.length === 0) {
        this.multipleSelection.push(row.orderNo)
      }
      request({
        url: '/car/findPageByRouteId',
        method: 'get',
        params: {
          routeId: this.allOrder,
          orderSum: this.multipleSelection.length
        }
      }).then(res => {
        if (res.code === '00000000') {
          this.anpaiData = res.data
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    queren (row) {
      request({
        url: '/order/updateOrder',
        method: 'post',
        data: {
          carId: row.id,
          orderNo: this.multipleSelection
        }
      }).then(res => {
        if (res.code === '00000000') {
          Message({
            message: res.message,
            type: 'success',
            duration: 5 * 1000
          })
          this.anpaiCarFlag = false
          this.tableData = []
          this.search()
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    getTableData () {
      request({
        url: '/order/findPage',
        method: 'get',
        params: {
          endTime: this.orderTime,
          routeId: this.allOrder,
          routeState: this.routeState,
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize
        }
      }).then(res => {
        if (res.code === '00000000') {
          if (!res.data) {
            Message({
              message: res.message,
              type: 'success',
              duration: 5 * 1000
            })
            return
          }
          this.tableData = res.data.data
          this.page.tatol = parseInt(res.data.totalCount)
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getTableData()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.getTableData()
    },
    rowStyle (row) {
      // console.log(row)
      if (row.rowIndex % 2 === 0) {
        return 'background: #ccc'
      }
    }
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
    }
  },
  watch: {
    anpaiCarFlag (val) {
      if (!val) {
        this.anpaiData = []
        this.multipleSelection = []
      }
    }
  }
}
</script>

<style>
</style>
